<template>
  <div class="box">
    <div class="search_div1">
      <van-icon class="icon1" name="arrow-left" @click="fanhui" />
      <van-search
        class="search1"
        shape="round"
        background="#fff"
        placeholder="请输入搜索关键词"
        v-model="wd"
        @search="onSearch"
      />
      <div class="spanseach" @click="onSearch">搜索</div>
    </div>
    <!-- 搜索历史 -->
    <div class="history_box" v-show="!isSearching">
      <h3 class="history">搜索历史</h3>
      <p v-for="(history, index) in searchStore.searchHistory" :key="index" class="history_aa">
        {{ history }}
        <van-icon name="cross" class="icon_quxiao" />
        <!-- <van-icon name="cross"  /> -->
      </p>
    </div>
    <!-- 结果页面 releaseTime-->
    <div class="result_box" v-show="isSearching">
      <!-- 显示搜索结果 -->
      <div v-for="result in searchStore.searchResults" :key="result.sickCircleId" class="aabox">
        <div>
          <h5>{{ result.title }}</h5>
          <p style="margin-left: 1rem">发布时间:{{ result.releaseTime }}</p>
          <p style="padding: .4rem">{{ result.detail }}</p>
          <p style="float: right; margin-right: .5rem">
            <span> 收藏:{{ result.collectionNum }}</span>
            <span style="margin-left: 2rem">建议:{{ result.commentNum }}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useSearchStore } from '../../stores/search'
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const searchStore:any = useSearchStore() // 获取搜索store
const isSearching = ref(false) // 控制搜索历史和结果页面的显示状态
const wd = ref<any>('') // 存储用户输入的搜索关键词
//返回
const fanhui = () => {
  // window.history.back()
  router.push('/patient')
}
// 当用户执行搜索时调用的方法
function onSearch() {
  console.log('ass', wd.value.trim())
  if (wd.value.trim()) {
    isSearching.value = true
    searchStore.handleSearch(wd.value) // 调用store的handleSearch方法
    console.log(searchStore.searchHistory, '14236432')
  } else {
    isSearching.value = false
    searchStore.searchResults = null // 清空搜索结果
  }
}
// 监听搜索框内容的变化
watch(wd, (newValue, oldValue) => {
  if (!newValue.trim()) {
    isSearching.value = false // 切换到历史页面
    searchStore.searchResults = null // 清空搜索结果
  }
})
//取消
function quxaio(history: string) {
  searchStore.removeSearchHistory(history)
}
</script>
<style scoped lang="scss">
.box {
  width: 100vw;
  height: 100vh;
  background-color: rgb(223, 221, 221);
  display: flex;
  flex-direction: column;
}
.search_div1 {
  display: flex;
  height: 5vh;
  justify-content: space-between;
  background-color: white;

  .search1 {
    flex: 1;
  }

  .icon1 {
    font-size: 20px;
    margin: 6px;
  }
  .spanseach {
    color: rgb(77, 151, 236);
    margin: .2rem;
  }
}
// 搜索历史
.history_box {
  width: 100%;
  flex: 1;
  margin-top: 1.5vh;
  background-color: white;
  .history {
    color: rgb(50, 152, 203);
    margin-left: 6.4px;
    margin-top: 16px;
  }
  .history_aa {
    padding: 4.8px;
  }
  .icon_quxiao {
    float: right;
    // margin-right: 11rem;
    color: rgb(146, 144, 144);
  }
}
//结果页面
.result_box {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 1.5vh;
  //   background-color: white;
  .aabox {
    width: 98%;
    height: 20vh;
    margin: 3.2px;
    background-color: white;
    h5 {
      padding: 8px;
    }
  }
}
</style>
